<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>车型配置选项详情</title>
    <!-- 引入 Element UI 的样式 -->
    <link rel="stylesheet" href="../../assets/css/element-ui.css" />
    <link rel="stylesheet" href="../../assets/css/styles.css" />
    <script src="../../assets/js/cdn.js"></script>
    <link rel="stylesheet" href="../../assets/fontawesome-free-6.7.2-web/css/all.min.css" />
  </head>
  <body>
    <div id="app">
      <lx-header slot="header" v-on:toggle="isToggle = !isToggle" :type="2"></lx-header>
      <div class="main-content">
        <div class="content" style="width: 100%">

          <h1 class="module-title">基本信息</h1>
          <div class="center-grid mb-20">
            <el-form ref="form" :model="formInfo" label-width="auto" label-position="right">
              <el-form-item label="车平台:">
                {{ formInfo.carPlatformCode + '-' + formInfo.carPlatformName }}
              </el-form-item>
              <el-form-item label="车型号:">
                {{ formInfo.carModelCode + '-' + formInfo.carModelName }}
              </el-form-item>
              <el-form-item label="大类名称:">
                {{ formInfo.bigConfigCode + '-' + formInfo.bigConfigName }}
              </el-form-item>
              <el-form-item label="小类名称:">
                {{ formInfo.smallConfigCode + '-' + formInfo.smallConfigName }}
              </el-form-item>
              <template v-if="formInfo.configType === '0'">
                <el-form-item label="固定值:">
                  <el-input v-model="formInfo.configText" @blur="handleBlur"></el-input>
                </el-form-item>
              </template>
            </el-form>
          </div>

          <template v-if="formInfo.configType != '0'">
            <h1 class="module-title">选项配置信息({{carModelSmallOptionsList.length}})</h1>
            <div class="center-grid mb-20">
              <el-row class="mb8" >
                <el-col :span="1" :push="0">
                    <el-button type="primary" plain size="mini" @click="addOption()">新增选项配置</el-button>
                </el-col>
              </el-row>
              <el-table v-loading="optionTableLoading" :data="carModelSmallOptionsList" stripe style="width: 100%">
                <el-table-column v-for="(item, index) in optionColumnData" :key="index" :label="item.fieldName" min-width="150">
                  <template slot-scope="scope">
                    <template> {{ scope.row[item.fieldApi] }} </template>
                  </template>
                </el-table-column>
                <el-table-column label="操作" :resizable="false" :show-overflow-tooltip="false" min-width="150" fixed="right">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text"  @click="delData(scope.row)">删除</el-button>
                    <el-button v-if="scope.row.isDefault === 0" size="mini" type="text"  @click="setDefault(scope.row)">设为默认值</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </div>
      </div>

      <el-dialog title="新增选项配置" :visible.sync="openOptionDia" :fullscreen="true" width="800px" append-to-body>
        <div>
          <el-table v-loading="optionTableLoading" :data="chooseOptionTable" @selection-change="selectionOptionChange">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column v-for="(item, index) in chooseOptionColumnData" :key="index" :label="item.fieldName" min-width="150" :width="item.width">
              <template slot-scope="scope">
                <template> {{ scope.row[item.fieldApi] }} </template>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
                  v-show="chooseOptionTotal>0"
                  :total="chooseOptionTotal"
                  :current-page.sync="queryParams.pageNum"
                  :page-size.sync="queryParams.pageSize"
                  @current-change="addOption"
          />
        </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOptionData">确 定</el-button>
        <el-button @click="cancleAdd">取 消</el-button>
      </div>
      </el-dialog>

      <!-- 添加或修改对话框 -->
<!--      <el-dialog title="修改工具/工装" :visible.sync="toolOpen" :fullscreen="true" width="800px" append-to-body>-->
<!--        <el-form ref="form" :model="toolForm" label-width="120px">-->
<!--          <el-form-item label="工具/工装编号:" prop="toolCode">-->
<!--            {{toolForm.toolCode}}-->
<!--          </el-form-item>-->
<!--          <el-form-item label="工具/工装类型:" prop="type">-->
<!--            {{ getOptionsStr('base_tools_type',toolForm.type) }}-->
<!--          </el-form-item>-->
<!--          <el-form-item label="工具/工装名称:" prop="toolName" readonly>-->
<!--            {{toolForm.toolName}}-->
<!--          </el-form-item>-->
<!--          <el-form-item label="数量:" prop="toolNum">-->
<!--            <el-input v-model="toolForm.toolNum" placeholder="数量" />-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--          <el-button type="primary" @click="handleToolNumChange">确 定</el-button>-->
<!--          <el-button @click="cancelAll">取 消</el-button>-->
<!--        </div>-->
<!--      </el-dialog>-->

    </div>
    <script src="../../assets/js/constant.js"></script>
    <script src="../../assets/js/utils.js"></script>
    <script src="../../assets/js/auth.js"></script>
    <script src="../../assets/js/axios.min.js"></script>
    <!-- 引入 Vue.js -->
    <script src="../../assets/js/vue.js"></script>
    <!-- 引入 Element UI 的 JS 文件 -->
    <script src="../../assets/js/element-ui.js"></script>

    <script type="module">
      import LxHeader from '../../pages/components/LxHeader/index.js'
      Vue.component('lx-header', LxHeader)
      checkAuthentication(2)
      new Vue({
        el: '#app',
        components: {},
        data() {
         return {
            currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
            userMenuList: JSON.parse(localStorage.getItem('userMenuList')) || [],
            toolOpen: false,
            toolForm: {},
            accessoriesOpen: false,
            accessoriesForm: {},
            businessCenters: [
                { name: '订单中心', path: '../index.html' },
                { name: '用户中心', path: '#' },
                { name: '产品中心', path: '#' },
                { name: '库存中心', path: '#' },
                { name: '财务中心', path: '#' },
                { name: '数据中心', path: '#' },
                { name: '系统中心', path: '#' },
                { name: '消息中心', path: '#' }
            ],
            baseInfoHeader: [
              { label: '车平台', fieldApi: 'carPlatformName' },
              { label: '车型号', fieldApi: 'carModelName' },
              { label: '大类名称', fieldApi: 'bigConfigName' },
              { label: '小类名称', fieldApi: 'smallConfigName'},
            ],
            dicts: [],
            optionsObj: [],
            // 选中数组
            codes: [],
            formInfo: {},
            detailDialog: false, // 详情
            carModelCode: '',
            smallConfigCode: '',
            root_host: root_host,
            request_host: request_host,
            openOptionDia: false,
            openToolDia: false,
            optionColumnData: [
              {
                fieldName: '选项配置编号',
                fieldApi: 'optionCode',
              },
              {
                fieldName: '选项配置名称',
                fieldApi: 'optionName'
              },
            ],
             componentTableDataInput: [],
             componentTableDataOutput: [],
             optionTableLoading: false,
             chooseOptionTable: [],
             chooseOptionTotal: 0,
            queryParams: {
              pageNo: 1,
              pageSize: 10,
              smallConfigCode: '',
            },
            chooseOptionColumnData: [
                {
                    fieldName: '选项配置编号',
                    fieldApi: 'optionCode',
                },
                {
                    fieldName: '选项配置名称',
                    fieldApi: 'optionName'
                },
            ],
            headers: {},
           carModelSmallOptionsList: []
          }
        },
        created() {
          this.init()
        },
        methods: {
          exit,
          init() {
            this.carModelCode = getUrlParameter('carModelCode')
            this.smallConfigCode = getUrlParameter('smallConfigCode')
            this.getDetails()
            this.getCarModelSmallOptionsList()
          },
          handleBlur() {
            let record = {
                carModelCode: this.carModelCode,
                smallConfigCode: this.smallConfigCode,
                configText: this.formInfo.configText
            }
            axios.put(`${this.request_host}/system/carModelSmallConfig/`, this.formInfo).then((response) => {
                if (response.status === 200) {
                  this.$message({
                    message: '更新成功',
                    type: 'success'
                  });
                }
              });
          },
          getDetails() {
            // 这里替换为实际的API调用
            axios.get(`${this.request_host}/system/carModelSmallConfig/${this.carModelCode}/${this.smallConfigCode}`)
                .then(response => {
                  this.formInfo = response.data.data
                });
          },
          getCarModelSmallOptionsList() {
            const params = {
              carModelCode: this.carModelCode,
              smallConfigCode: this.smallConfigCode,
            }
            axios.get(`${this.request_host}/system/carModelSmallOptions/allList`, { params: params }).then((response) => {
                if (response.status == 200) {
                  this.carModelSmallOptionsList = response.data.data
                }
            });
          },
          addOption(){
            this.openOptionDia = true
            const params = {
                smallConfigCode: this.smallConfigCode,
            }
            axios.get(`${this.request_host}/system/smallConfigOptions/allList`,{ params }).then((response) => {
                if (response.status == 200) {
                  this.chooseOptionTable = response.data.data
                  const selectedOptions = this.carModelSmallOptionsList.map(item => item.optionCode);
                  this.chooseOptionTable = this.chooseOptionTable.filter(item => !selectedOptions.includes(item.optionCode));
                  this.chooseOptionTotal = this.chooseOptionTable.length
                }
              });
          },
          // 多选框选中数据
          selectionOptionChange(selection) {
              this.codes = selection.map(item => item.optionCode)
          },
          // 添加关联部件数据
          addOptionData(){
            const addOptionParams = {
              carModelCode: this.carModelCode,
              smallConfigCode: this.smallConfigCode,
              codes: this.codes,
            }
            axios.post(`${this.request_host}/system/carModelSmallOptions/addSmallOptions`,addOptionParams).then((response) => {
                if (response.status == 200) {
                  this.getCarModelSmallOptionsList()
                  this.cancleAdd()
                }
              })
          },
          cancleAdd(){
            this.codes = []
            this.openOptionDia = false
            this.openToolDia = false
            this.openAccessoriesDia = false
          },
          handleUpdate(type,row){
            // 修改跳转到对应列表页
            //window.open(url)
            if(type==='1'){
              this.toolOpen = true
              console.log(row)
              this.toolForm = row
              this.toolForm.carModelCode = this.carModelCode
              this.toolForm.smallConfigCode = this.smallConfigCode
            }else if(type==='2'){
              this.accessoriesOpen = true
              this.accessoriesForm = row
              this.accessoriesForm.carModelCode = this.carModelCode
              this.accessoriesForm.smallConfigCode = this.smallConfigCode
            }
            this.submitFlag = 1
          },
          cancelAll(){
            this.toolOpen = false
            this.toolForm = {}
            this.accessoriesOpen = false
            this.accessoriesForm = {}
            this.submitFlag = 0
          },
          // 删除pu关联数据
          delData(row){
            const params = {
                carModelCode: row.carModelCode,
                smallConfigCode: row.smallConfigCode,
                optionCode: row.optionCode,
            }
            axios.delete(`${this.request_host}/system/carModelSmallOptions`, { params }).then((response) => {
                if (response.status == 200) {
                  this.init()
                }
              })
          },
          // 设置默认值
          setDefault(row) {
              row.isDefault = 1
              axios.put(`${this.request_host}/system/carModelSmallOptions`, row).then((response) => {
                  if (response.status == 200) {
                      this.init()
                  }
              })
          },
          // 上传成功回调
          handleUploadSuccess(response, file, fileList) {
            if (response.code === 200) {
              this.$message.success('上传成功');
              this.formInfo.puFile = response.data;
              // 更新文件列表，只显示文件名
              this.fileList = [{
                name: file.name,
                url: response.data
              }];
            } else {
              this.$message.error(response.msg || '上传失败');
            }
          },
          // 处理文件下载
          handleDownload(file) {
            if (file.url) {
              window.open(this.request_host + '/system/pu/download?filePath=' + encodeURIComponent(file.url));
            }
          },
          // 处理文件删除
          handleDeleteFile(file) {
            this.$confirm('确认删除该文件吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              axios.post(`${this.request_host}/system/pu/deleteFile`, {
                smallConfigCode: this.smallConfigCode,
                filePath: file.url
              }).then(response => {
                if (response.status == 200) {
                  this.$message.success('删除成功');
                  this.fileList = [];
                  this.formInfo.puFile = '';
                }
              }).catch(error => {
                console.error('删除失败:', error);
                this.$message.error('删除失败');
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          // 上传失败回调
          handleUploadError(err) {
            this.$message.error('上传失败');
            console.error('上传失败:', err);
          },
          // 上传前校验
          beforeUpload(file) {
            return true;
          },
          // 处理工具数量变更
          handleToolNumChange(row) {
            console.log(this.toolForm)
            axios.post(`${this.request_host}/system/pu/updateToolNum`, this.toolForm).then(response => {
              if (response.status == 200) {
                this.$message.success('保存成功');
                this.toolOpen = false
                this.toolForm = {}
                this.getToolList()
              }
            }).catch(error => {
              console.error('保存失败:', error);
              this.$message.error('保存失败');
            });
          },
          // 处理工具数量变更
          handleAccessoriesNumChange(row) {
            axios.post(`${this.request_host}/system/pu/updateAccessoriesNum`, this.accessoriesForm).then(response => {
              if (response.status == 200) {
                this.$message.success('保存成功');
                this.accessoriesOpen = false
                this.accessoriesForm = {}
                this.getAccessoriesList()
              }
            }).catch(error => {
              console.error('保存失败:', error);
              this.$message.error('保存失败');
            });
          },
          openMenu(url) {
            window.open(url)
          },
        }
      })
    </script>
    <style>
      .el-table th.el-table__cell {
        background-color: #f2f2f2; /* 例如，设置为浅灰色 */
      }
      .mb8 {
            height: 30px;
        }
    </style>
  </body>
</html>
